<template>
  <div class="box">
    <canvas id="myCanvas"></canvas>
  </div>
</template>
  
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = document.getElementById("myCanvas");
      // 根据需要设置canvas的宽度和高度
      canvas.width = 500;
      canvas.height = 500;
      const context = canvas.getContext("2d");
      context.strokeStyle = "#000000"; // 设置画笔颜色
      canvas.onclick = (event) => {
        const rect = canvas.getBoundingClientRect(); // 获取canvas元素的位置信息
        const x = event.clientX - rect.left; // 获取点击位置的x坐标
        const y = event.clientY - rect.top; // 获取点击位置的y坐标

        // 清除之前画的内容
        context.clearRect(0, 0, canvas.width, canvas.height);

        // 画一个圆点表示标注点
        context.beginPath();
        context.arc(x, y, 5, 0, 2 * Math.PI);
        context.stroke();
        // 计算经纬度
        const lng = ((x - canvas.width / 2) * 360) / canvas.width;
        const lat = ((canvas.height / 2 - y) * 180) / canvas.height;
        console.log("lng: " + lng + ", lat: " + lat);
      };
    },
  },
};
</script>
  
<style lang="less" scoped>
#myCanvas {
  width: 500px;
  height: 400px;
  border: 1px solid darkcyan;
}
</style>
    